<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单的计算器</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <!-- Vue哲学 ：数据驱动视图
        数据发生改变 绑定了数据的视图 所以也跟着改变 
         -->
    <div id="app">
        <!-- 动态绑定单向 v-bind:属性名="属性值" 不能用{{}} -->
        <!-- 动态绑定双向 v-model="属性值" 不能用{{}} -->
        <input type="text" name="num1" v-model="num1">
        <!-- v-model.number  .number修饰符 表示v-model改变数据时候强制转换为数字 -->
        <!-- <input type="text" v-model.number="num1"> -->
        <select name="operation" id="" v-model="operation">
            <option value="0">+</option>
            <option value="1">-</option>
            <option value="2">*</option>
            <option value="3">/</option>
        </select>
        
        <input type="text" name="num2" v-model="num2">

    <!-- v-开头  v-on 指令 ：绑定事件名称 = "一个值 写函数名" -->
    <!-- 
        1.通过vue实例选项的methods定义模板成员的方法
         2.通过v-on指令让元素与方法产生绑定关系
         语法  v-on:事件名称="methods定义方法名称"
         v-on指令作用给元素绑定事件处理方法 
    -->

        <button v-on:click="dengyu">=</button>
        
        {{result}}
        
    </div>
    <script>
        //实例化一个vue对象
//const一个变量app把 接收起来
        const app = new Vue({
            //参数对象里面的属性---配置选项
            //el 表示这个实例接管这个Dom节点 ，data就是数据 可以用插值表达式显示在{{message}}里显示数据 
            el: "#app",//告诉vue管理谁
            // data属性就是模板数据
            data: {
                num1:  "0",
                operation: "0",
                num2: "0",
                result: "计算结果",
            },
            methods: {
            dengyu: function(){
                //查看this代表的是谁？
                //console.log(this);
                //计算器算数的方法 逻辑
                switch(this.operation){
                        case '0':
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                    break;
                        case '1':
                        this.result = parseInt(this.num1) - parseInt(this.num2);
                    break;
                        case '2':
                        this.result = parseInt(this.num1) * parseInt(this.num2);				
                    break;
                        case '3':
                        this.result = parseInt(this.num1) / parseInt(this.num2);
                    break;
				}
            }
           }
        });
    </script>
</body>
</html>
